<template>
  <div class="crud">
    <el-table
      ref="gridTable"
      v-loading="listLoading"
      :data="showGridData"
      :tree-props="treeProps || {}"
      :row-key="rowKey"
      :span-method="objectSpanMethod"
      :default-expand-all="!lazy"
      :lazy="lazy"
      :load="onLoadChildren"
      size="small"
      style="width: 100%"
    >
      <el-table-column
        v-for="(item,index) in gridColumns"
        :key="index"
        :prop="item.prop"
        :class-name="item.className || ''"
        :label="item.label"
        :resizable="!!item.resizable"
        :sortable="item.sortable"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :width="item.width?item.width:''"
      >
        <template slot-scope="scope">
          <cell
            v-if="item.render"
            :row="scope.row"
            :column="item"
            :index="scope.$index"
            :render="item.render"
          />
          <template v-else-if="item.filter">{{ item.filter(scope.row[item.prop]) }}</template>
          <formatter-component
            v-else
            :format="item.format"
            :options="item.options"
            :row="scope.row"
            :column="item.prop"
            :index="scope.$index"
            @click="onCellClick"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="visibleHandle"
        fixed="right"
        label="操作"
        align="right"
        class-name="action-column"
        :width="gridEditWidth?gridEditWidth:''"
      >
        <template slot-scope="scope">
          <el-button
            v-for="(item,index) in validateHandles(scope.row)"
            :key="index"
            size="mini"
            :type="item.type?item.type:'text'"
            @click="handleEmit(item.emitName, scope.row)"
          >{{ item.name }}</el-button>
        </template>
      </el-table-column>
      <div
        slot="append"
        class="crud-footer"
      >
        <slot name="append" />
      </div>
    </el-table>
  </div>
</template>

<script>
import GridProps from '../mixins/gridProps'

export default {
  name: 'GridTreeView',
  mixins: [GridProps],
  computed: {
    rowKey() {
      if (this.treeProps) {
        var primary = this.gridConfig.find(item => {
          return item.options && item.options.primaryKey
        })
        if (primary) {
          return primary.prop
        }
      }
      return undefined
    },
    rowColumnMergeOptions() {
      var temp = {}
      for (var i = 0, size = this.gridConfig.length; i < size; i++) {
        const { options } = this.gridConfig[i]
        if (options && options.merges) {
          temp[i] = options.merges
        }
      }
      return temp
    }
  },
  inject: ['apiRequestMethod'],
  methods: {
    onLoadChildren(tree, treeNode, resolve) {
      this.apiRequestMethod({ pid: tree.id }).then(res => {
        const data = res.data
        if (data.items) {
          resolve(data.items)
        } else {
          resolve(res.data)
        }
      })
    },
    onExpandRow(row) {
      this.$refs.gridTable.toggleRowExpansion(row)
    },
    indexMethod(index) {
      return index
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.children && row.children.length) {
        var merges = this.rowColumnMergeOptions[columnIndex]
        if (merges && merges.length > 0) {
          return merges
        }
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.children && row.children.length) {
        return 'bg-primary-o-20'
      }
    }
  }
}
</script>
